<template>
  <div>
    <div onselectstart="return false;"
         style="-moz-user-select: none">
      <template v-for="tag in dialog.tagLists">
        <a-tooltip :key="tag"
                   :title="nameList[tag] && nameList[tag][pro.name] ? nameList[tag][pro.name] : ''">
          <a-tag v-if="nameList[tag] && nameList[tag][pro.name] && nameList[tag][pro.name].length > 20"
                 :key="tag"
                 :closable="!notAllowed.includes(tag)"
                 @click="removeTag(tag)"
                 @close="removeTag(tag)">
            {{ nameList[tag] && nameList[tag][pro.name] ? nameList[tag][pro.name].slice(0, 20) + '...':'' }}
          </a-tag>
          <a-tag v-else
                 :key="tag"
                 :closable="!notAllowed.includes(tag)"
                 @click="removeTag(tag)"
                 @close="removeTag(tag)">
            {{ nameList[tag] && nameList[tag][pro.name] ? nameList[tag][pro.name]:'' }}
          </a-tag>
        </a-tooltip>
      </template>
      <!-- <template v-for="tag in slotTag">
        <a-tag :key="tag.id"
               :closable="true"
               @click="removeTag(tag)"
               @close="removeTag(tag)">
          {{tag.name}}
        </a-tag>
      </template> -->
    </div>
  </div>
</template>

<script>
const deepClone = require('clone')
export default {
  name: 'TagListAntD',
  inject: ['orgin', 'dialog'],

  props: {
    pro: {
      type: Object,
      default: () => {
        return {
          id: 'id',
          name: 'name'
        }
      }
    },
    value: {
      type: Array,
      default: () => []
    },
    notAllowed: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      newValue: [],
      slotChangeValue: [],
      nameList:{}
    }
  },
  watch: {
    slotTagList: {
      handler (slotTab, oldValue) {
        if (slotTab) {
          let newSlot = slotTab.map(item => {
            return item.id
          })
          let oldSlot = oldValue ? oldValue.map(item => {
            return item.id
          }) : []
          let removeids = oldSlot.filter(item => {
            return !newSlot.includes(item)
          })
          removeids.map(item => {
            this.removeTag(item)
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    slotTagList () {
      let arr = []
      if (this.orgin.slotTab) {
        this.orgin.slotTab.map(item => {
          arr = [...arr, ...item.data]
        })
      }
      return deepClone(arr)
    }
  },
  watch: {
    "orgin.labelDataList":{
      handler (val) {
        if (this.slotTagList.length) {
          this.slotTagList.map(item => {
            if(!val[item.id]){
              val[item.id] = item
            }
          })
        }
        this.nameList = val
      },
      deep: true,
      immediate: true
    }
  },
  mounted () { },
  methods: {
    // 删除tag
    removeTag (tag) {
      if (this.notAllowed.includes(tag)) {
        return false
      }
      this.dialog.tagLists.splice(this.dialog.tagLists.indexOf(tag), 1)
    }
  }
}
</script>

<style lang="less" scoped>
.ant-tag {
  margin: 3px;
  padding: 0 2px 0 10px;
  cursor: pointer;
}
</style>
